$page-width: 940px;
$banner-height: 160px;
$banner-background-color: #973b12;

body, html {
  @include background-image(
    image-url('noise.png'),
    linear-gradient(center top, white ($banner-height + 1px), #dfd6cf ($banner-height + 1px), white ($banner-height + 200px), white 1000px)
  );
}

header[role=banner] {
  text-align: center;
  hgroup {
    text-align: left;
    width: $page-width;
    margin: 0 auto;
    display: block;
  }
}

a[role=logo] {
  display: block;
  position: absolute;
  top: 30px;
  @include replace-text-with-dimensions('logo.png');
}

nav[role=navigation] {
  background: #973b12;
  @include background-image(
    linear-gradient(rgba(black, 0) 0%, rgba(black, 0) 80%, rgba(black, 0.15) 100%),
    linear-gradient(left, rgba(black, 0.35) 0%, rgba(black, 0) 15%, rgba(black, 0.25) 60%, rgba(black, 0.35) 100%),
    linear-gradient(darken($banner-background-color, 6), $banner-background-color, darken($banner-background-color, 11))
  );
  text-align: center;
  
  ul {
    width: $page-width;
    margin: 0 auto;
    line-height: $banner-height;
    height: $banner-height;
    text-align: right;
  }
  
  li {
    display: inline;
  }
  
  a {
    font-size: 18px;
    color: mix($banner-background-color, white, 40%);
    text-decoration: none;
    padding: 1em;
    
    @include text-shadow(rgba(black, 0.5) 0 1px 0);
    
    &:hover {
      color: mix($banner-background-color, white, 20%);
      text-decoration: underline;
    }
  }
  
  li.here {
    a {
      color: mix($banner-background-color, white, 20%);
      font-weight: bold;
      @include text-shadow(rgba(black, 0.75) 0 2px 0);
    }
  }
  li.highlight {
    a {
      color: mix($banner-background-color, #fc3, 40%);
    }
  }
}

nav[role=breadcrumbs] {
  margin: 1em 0 -1.5em;
  color: $light-color;
  a {
    color: $text-color !important;
    text-decoration: none;
    &:after {
      color: $link-color;
      content: " ⇢ ";
    }
  }
}

section[role=main] {
  width: $page-width;
  margin: 0 auto;
}

section.three-column-grid {
  clear: both;
  margin: 1em -10px;
  @include clearfix;
  
  > section {
    float: left;
    padding: 0 10px;
    width: 300px;
  }
  > section:nth-child(3n+4) {
    clear: both;
  }
  
  &.features {
    font-size: 85%;
  }
}

body[role=homepage] h1 {
  margin-top: 0.25em !important;
  padding: 0;
}

div.featured-video {
  margin-bottom: 4em;
  object,img { float: right; margin: -2em 0 2em 10px; }
  img { border: 8px solid rgba(black, 0.1); @include border-radius(8px); }
}

body > footer {
  background: rgba(#732626, 0.1);
  border-top: 3px double #dad3c8;
  font-size: 85%;
  margin: 2em 0 0;
  padding: 1em;
  small {
    display: block;
    width: $page-width;
    margin: 0 auto;
  }
  p {
    margin: 1em 0;
  }
  em {
    font-style: italic;
  }
}
